<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <template v-if="item.type === 'select'">
            <el-time-select
                :placeholder="item.placeholder"
                :readonly="item.readonly"
                :disabled="item.disabled"
                :editable="item.editable"
                :clearable="item.clearable"
                :size="item.size | setSize(item.size)"
                :align="item.align"
                :default-value="item.defaultValue"
                :prefix-icon="item.prefixIcon"
                :clear-icon="item.clearIcon"
                :picker-options="item.pickerOptions"
                :class="item.class"
                v-model="formData[item.prop]"
                @change="onTimePickerChange"
                @blur="onTimePickerBlur"
                @focus="onTimePickerFocus"
            />
        </template>
        <template v-else-if="item.type === 'picker'">
            <el-time-picker
                :placeholder="item.placeholder || '任意时间点'"
                :readonly="item.readonly || false"
                :disabled="item.disabled || false"
                :editable="item.editable || true"
                :clearable="item.clearable || true"
                :size="item.size || 'medium'"
                :align="item.align || ''"
                :value-format="item.valueFormat || ''"
                :default-value="item.defaultValue || ''"
                :prefix-icon="item.prefixIcon || 'el-icon-time'"
                :clear-icon="item.clearIcon || 'el-icon-circle-close'"
                :is-range="item.isRange || false"
                :start-placeholder="item.startPlaceholder || ''"
                :end-placeholder="item.endPlaceholder || ''"
                :range-separator="item.rangeSeparator || ''"
                :arrow-control="item.arrowControl || false"
                :popper-class="item.popperClass || ''"
                :picker-options="item.pickerOptions || {}"
                :class="item.class"
                v-model="formData[item.prop]"
                @change="onTimePickerChange"
                @blur="onTimePickerBlur"
                @focus="onTimePickerFocus"
            />
        </template>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-timePicker',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * Time Select（固定） Time Picker（任意）类型
                     * @type String
                     * @value select（固定） / picker（任意）
                     */
                    type: '',
                    /**
                     * 非范围选择时的占位内容
                     * @type String
                     */
                    placeholder: '',
                    /**
                     * 完全只读
                     * @type Boolean
                     * @value true/false
                     */
                    readonly: false,
                    /**
                     * 禁用
                     * @type Boolean
                     * @value true/false
                     */
                    disabled: false,
                    /**
                     * 	文本框可输入
                     * @type Boolean
                     * @value true/false
                     */
                    editable: true,
                    /**
                     * 是否显示清除按钮
                     * @type Boolean
                     * @value true/false
                     */
                    clearable: true,
                    /**
                     * 输入框尺寸
                     * @type String
                     * @value medium / small / mini
                     */
                    size: 'medium',
                    /**
                     * 对齐方式
                     * @type String
                     * @value left / center / right, left（默认）
                     */
                    align: 'left',
                    /**
                     * 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象
                     * @type String
                     */
                    valueFormat: '',
                    /**
                     * 可选，选择器打开时默认显示的时间
                     * @type Date(TimePicker) / String(TimeSelect)
                     */
                    defaultValue: '',
                    /**
                     * 自定义头部图标的类名
                     * @type String
                     */
                    prefixIcon: 'el-icon-time',
                    /**
                     * 自定义清空图标的类名
                     * @type String
                     */
                    clearIcon: 'el-icon-circle-close',
                    /**
                     * 是否为时间范围选择，仅对<el-time-picker>有效
                     * @type Boolean
                     * @value true/false
                     */
                    isRange: false,
                    /**
                     * 范围选择时开始日期的占位内容
                     * @type String
                     */
                    startPlaceholder: '',
                    /**
                     * 范围选择时开始日期的占位内容
                     * @type String
                     */
                    endPlaceholder: '',
                    /**
                     * 选择范围时的分隔符
                     * @type String
                     */
                    rangeSeparator: '-',
                    /**
                     * 是否使用箭头进行时间选择，仅对<el-time-picker>有效
                     * @type Boolean
                     * @value true/false
                     */
                    arrowControl: false,
                    /**
                     * TimePicker 下拉框的类名
                     * @type String
                     */
                    popperClass: '',
                    /**
                     * 当前时间日期选择器特有的选项
                     * @type Object
                     * @value {}
                     */
                    pickerOptions: {
                        /**
                         * 开始时间（Time Select Options）
                         * @type String
                         * @value '09:00'（默认）
                         */
                        start: '',
                        /**
                         * 结束时间（Time Select Options）
                         * @type String
                         * @value '18:00'（默认）
                         */
                        end: '',
                        /**
                         * 间隔时间（Time Select Options）
                         * @type String
                         *  @value '00:30'（默认）
                         */
                        step: '',
                        /**
                         * 最小时间，小于该时间的时间段将被禁用（Time Select Options）
                         * @type String
                         * @value '00:00'（默认）
                         */
                        minTime: '',
                        /**
                         * 最大时间，大于该时间的时间段将被禁用（Time Select Options）
                         * @type String
                         */
                        maxTime: '',
                        /**
                         * 开始时间（Time Picker Options）
                         * @type String/Array
                         * @value 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']
                         */
                        selectableRange: '',
                        /**
                         * 时间格式化(TimePicker)（Time Picker Options）
                         * @type String
                         * @value 小时：HH，分：mm，秒：ss，AM/PM A,  'HH:mm:ss'（默认）
                         */
                        format: ''
                    },
                    /**
                     * 自定义时间选择器类名
                     * @type string
                     * @value ''
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 用户确认选定的值时触发
         * @param 组件绑定值
         *
         */
        onTimePickerChange(data) {
            this.dispatch('baseForm', 'onTimePickerChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 当 input 失去焦点时触发
         * @param 组件实例
         *
         */
        onTimePickerBlur(data) {
            this.dispatch('baseForm', 'onTimePickerBlur', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 当 input 获得焦点时触发
         * @param 组件实例
         *
         */
        onTimePickerFocus(data) {
            this.dispatch('baseForm', 'onTimePickerFocus', {
                data: data,
                prop: this.item.prop
            })
        }
    }
}
</script>
